<template>
    <div class="business_container">
        <el-tabs v-model="active.name" class="tabs_box" @tab-change="handleClick">
            <el-tab-pane label="商机列表" name="first">
                <div v-show="active.type == 1">
                    <List :active="active.type" @submit="activeHandle" />
                </div>
                <div v-show="active.type == 2">
                    <CarList :active="active.type" @submit="activeHandle" />
                </div>
            </el-tab-pane>
            <el-tab-pane label="商机流程" name="second">
                <Process />
            </el-tab-pane>
            <el-tab-pane label="输单原因" name="third">
                <Lose />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'SALESLEADS_SALESMANAGEMENT_BUSINESS' });
</script>

<script lang="tsx" setup>
import List from './components/List.vue';
import CarList from './components/CarList.vue';
import Process from './components/Process.vue';
import Lose from './components/Lose.vue';
import bus from '@/utils/bus';
import { reactive, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
const active = reactive({
    name: 'first',
    type: 1,
    num: 99
});
const activeHandle = (v: string) => {
    const obj = {
        MENU: () => (active.type = 2),
        CREATE: () => router.push('/salesleads/salesmanagement/business/create')
    };
    obj[v]();
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
    bus.emit('getTableH', 'getTableH');
};
// 切换页面
const onExpand = () => {
    active.type = 1;
};
bus.on('EXPAND', onExpand);
</script>
<style lang="scss" scoped>
.business_container {
    padding: 24px;
    padding-top: 10px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}

.tabs_box {
    :deep(.el-tabs__item) {
        color: #969696;
    }

    :deep(.is-active) {
        font-weight: 600;
        color: #ff6b00;
    }
}
</style>
